<template>
  <div id="incityCancelRule">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="safetycenter_box">
      <div class="safetycenter_banner">
        <img src="@/assets/imgs/safe_bg@2x.png" />
      </div>
      <div class="safetycenter_ct">
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_jjlxr_icon.png" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6>
              紧急联系人
              <span :class="{ off_btn: IsurgentName }" @click="seturgentName">{{ urgentName }}</span>
            </h6>
            <p>除紧急情况联系，还可以行程分享</p>
          </div>
        </div>
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_wz_icon.png" style="height:40px;margin-top:50px;" />
          </div>
          <div class="safetycenter_ct_box_center" style="margin-top:20px">
            <h6>
              开启实时位置
              <span :class="{ off_btn: Islocation }">{{ locationText }}</span>
            </h6>
            <p>
              您行程中的实时位置将在安全中心显示，通过多种异常
              判断来确保您的行程安全
            </p>
          </div>
        </div>
        <!-- <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_luyin_icon.png" style="height:42px;" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6>
              开启行程录音
              <span :class="{ off_btn: Issound }">{{ soundText }}</span>
            </h6>
            <p>用于纠纷取证，风险预判</p>
          </div>
        </div>-->
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_dx_icon.png" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6>
              安全短信提示
              <span :class="{ off_btn: Ismessage }">{{ messageText }}</span>
            </h6>
            <p>行程中系统触发安全短信给您的紧急联系人</p>
          </div>
        </div>
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_yinsi_icon.png" style="height:42px;" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6>
              隐私号码保护
              <span style="color:#999">已开启</span>
            </h6>
            <p>自动小号显示电话号码，防止骚扰等行为</p>
          </div>
        </div>
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_yjbj_icon.png" style="height:36px;" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6>
              一键报警
              <span style="color:#999">已开启</span>
            </h6>
            <p>自动小号显示电话号码，防止骚扰等行为</p>
          </div>
        </div>
        <div class="safetycenter_ct_box">
          <div class="safetycenter_ct_box_left">
            <img src="@/assets/imgs/safe_xcy_icon.png" style="height:36px;margin-top:55px;" />
          </div>
          <div class="safetycenter_ct_box_center">
            <h6 @click="quizBtn">
              30秒安全小测验
              <span :class="{ off_btn: Isquiz }">{{ quizText }}</span>
            </h6>
          </div>
        </div>
        <div class="circular_box">
          <CircleProgress
            :width="200"
            :radius="6"
            :isAnimation="true"
            :progress="progressNmuber"
            barColor="#FF6917"
            backgroundColor="#979797"
          >
            <slot>
              <div class="circular_number">
                <h6>保障度</h6>
                <p>{{ progressNmuber }}%</p>
              </div>
            </slot>
          </CircleProgress>
        </div>
        <div class="safety_center_btn" @click="goHtich">
          <p>开始使用</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import { Icon, Dialog, Toast } from 'mand-mobile';
import Loading from '@/components/loading';
import http from '@/common/http';
import CircleProgress from 'vue-circleprogressbar';
export default {
  components: {
    [TopBar.name]: TopBar,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    CircleProgress
  },
  data() {
    return {
      title: '安全中心',
      IsTopbar: true,
      urgentName: '设置',
      IsurgentName: false, // 是否设置紧急联系人
      locationText: '开启',
      Islocation: false, // 是否开启定位
      soundText: '开启',
      Issound: false, // 是否开启录音
      messageText: '开启',
      Ismessage: false, // 是否开启安全短信
      quizText: '点击开始',
      Isquiz: false, // 是否已完成安全小测试
      progressNmuber: 40 // 圆形进度条
    };
  },
  mounted() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    // 检查各项开启状态
    Loading.show();
    http.post('/pakj/hitchUser/getSafeStatus', {}).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.safePersonFlag === '1') {
          // 是否开启紧急联系人 1 开启
          this.IsurgentName = true;
          this.urgentName = '已设置';
          this.progressNmuber = parseInt(this.progressNmuber) + 20;
        } else {
          this.IsurgentName = false;
          this.urgentName = '设置';
        }
        if (res.data.data.safeSmsFlag === '1') {
          // 是否开启安全短信提示 1 开启
          this.Ismessage = true;
          this.progressNmuber = parseInt(this.progressNmuber) + 20;
        } else {
          this.Ismessage = false;
        }
        if (res.data.data.safeFAQFlag === '1') {
          // 答题状态 1 完成
          this.Isquiz = true;
          this.progressNmuber = parseInt(this.progressNmuber) + 20;
        } else {
          this.Isquiz = false;
        }
        console.log(res.data);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 设置紧急联系人
    seturgentName() {
      if (!this.IsurgentName) {
        this.$router.push({
          name: 'AddContact',
          query: {
            userid: this.$route.query.userid,
            type: this.$route.query.type
          }
        });
      }
    },
    // 安全小测试
    quizBtn() {
      if (!this.Isquiz) {
        this.$router.push({
          name: 'hitchhikeSafetyQuestion',
          query: {
            userid: this.$route.query.userid,
            type: this.$route.query.type
          }
        });
      }
    },
    // 开始使用
    goHtich() {
      if (!this.IsurgentName) {
        Toast({
          content: '请设置紧急联系人',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.Islocation) {
        Toast({
          content: '请开启实时定位',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.Ismessage) {
        Toast({
          content: '请开启安全短信提示',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.Isquiz) {
        Toast({
          content: '请完成30秒安全小测验',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#incityCancelRule {
  height: 100vh;
  background-color: color-primary-background;

  .clear {
    clear: both;
  }

  h6, h5 {
    display: block;
    font-size: 22px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
  }

  .safetycenter_banner img {
    width: 100%;
    height: 303px;
  }

  .safetycenter_ct {
    height: 800px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin: 0px 20px;
  }

  .safetycenter_ct_box {
    margin: 0px 20px;
    height: 144px;
    border-bottom: 1px solid #E0E0E0;
  }

  .safetycenter_ct_box_left {
    float: left;
  }

  .safetycenter_ct_box_left img {
    width: 32px;
    height: 32px;
    margin-top: 66px;
  }

  .safetycenter_ct_box_center {
    float: left;
    margin-left: 20px;
    width: 590px;
    margin-top: 50px;
  }

  .safetycenter_ct_box_center h6 {
    font-size: 30px;
    color: #333;
    font-weight: 400;
  }

  .safetycenter_ct_box_center h6 span {
    font-size: 24px;
    float: right;
    color: #FF6917;
  }

  .safetycenter_ct_box_center h6 span.off_btn {
    color: #999;
  }

  .safetycenter_ct_box_center p {
    font-size: 24px;
    color: #999;
  }

  .safety_center_btn {
    margin: 20px 20px 0px 20px;
  }

  .circular_box {
    margin-top: 20px;
    height: 200px;
    text-align: center;
    position: relative;
  }

  .circular_number {
    font-weight: 400;
  }

  .circular_number h6 {
    font-size: 30px;
    color: #333;
  }

  .circular_number p {
    position: relative;
    top: 10px;
    color: #FF6917;
  }

  .safety_center_btn p {
    height: 98px;
    background: rgba(255, 105, 23, 1);
    border-radius: 10px;
    color: #fff;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
  }
}
</style>
